import { PageContainer } from '@ant-design/pro-layout';
import ProTable, {ActionType} from '@ant-design/pro-table';
import { PlusOutlined } from '@ant-design/icons';
import {Button, Switch, Image, message, Popconfirm} from 'antd';
import React, {useRef, useState} from 'react';
import {
  addClassify,
  ArticleStatus,
  deleteCategoryClassify,
  getArticleClassify
} from "@/services/ant-design-pro/article";
import '../article.css';
import ModalList from './Modal'
import {Link} from "@umijs/preset-dumi/lib/theme";

const Index = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const actionRef =  useRef<ActionType>();
  const text='确定要删除吗？';

  // 弹出模态框
  const alertModal = ()=>{
    setIsModalVisible(true);
  }


  const columns= [
    {
      title: 'ID',
      dataIndex: 'id',
      align:'center',
      search:false
    },
    {
      title: '分类昵称',
      align:'center',
      dataIndex: 'nickname',
    },
    {
      title: '分类图片',
      align:'center',
      search: false,
      dataIndex: 'image_url',
      render:(_,record)=> {
        return (
          <Image
            width={50}
            src={record.image_url}
          />
        )
      },
    },
    {
      title: '状态',
      ellipsis: true,
      dataIndex: 'status',
      copyable: true,
      align:'center',
      search:false,
      valueType: 'select',
      render: (_,record) => [
        <Switch
          checkedChildren="显示"
          unCheckedChildren="隐藏"
          defaultChecked={record.status}
          onChange={async (state)=>{
            ArticleStatus(record.id,{
              status:state ? 1 : 0
            }).then(() => {
              message.success('操作成功！')
              actionRef.current?.reload();
            })
          }}
        />,
      ],
    },
    {
      title: '操作',
      width: 180,
      align:'center',
      key: 'option',
      valueType: 'option',
      render: (_,record) => [
        <a key="link" onClick={()=>{}}>编辑</a>,
        <a key="link2">
          <Popconfirm
            placement="top"
            title={text}
            okText="确定"
            cancelText="取消"
            onCancel={()=>{
              message.success('取消删除成功！')
              actionRef.current?.reload();
            }}
            onConfirm={async ()=>{await deleteCategoryClassify(
              record.id
            ).then(()=>{
              message.success('删除成功！')
              actionRef.current?.reload();
            })
            }}
          >删除
          </Popconfirm>
        </a>,
        <Link to={{pathname:'../content/Article'}}>
          <a key="link3">查看文章</a>
        </Link>,

      ],
    },
  ];

  return (
    <PageContainer>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        request={async ()=>{
          const data = await getArticleClassify()
          return {
            data,
            success:true,
          }
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        dateFormatter="string"
        toolBarRender={() => [
          <Button key="button" icon={<PlusOutlined />} type="primary" onClick={ alertModal }>
            添加文章分类
          </Button>,
        ]}
      />
      {
        isModalVisible ?
          <ModalList
            isModalVisible={isModalVisible}
            open={async (values)=>{

              console.log(values);
              await addClassify({...values})
              message.success('添加成功！')

              actionRef.current?.reload()
              setIsModalVisible(false)
            }}
            closed={()=>{
              setIsModalVisible(false)
            }}
          />
          : null
      }

    </PageContainer>
  );
};

export default Index;
